<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>排班日历</title>
	    <%@include file="/common/commonCSS.jsp" %>
	    <%@include file="/common/commonJS.jsp" %>
		<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
		<%--<script src="${ctx }/js/plugs/echarts/echarts-master/dist/echarts.js"></script>--%>
	</head>
	<body >
	<div id="main" style="width:100%;height:500px;"></div>
	<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        <%--var dateList = JSON.parse( ${days} ); //JSON.parse( jsonStr );--%>
        var dateList =  ${days} ; //JSON.parse( jsonStr );

        var heatmapData = [];
        var lunarData = [];
        for (var i = 0; i < dateList.length; i++) {
            heatmapData.push([
                dateList[i][0],
                Math.random() * 300
            ]);
            lunarData.push([
                dateList[i][0],
                1,
                dateList[i][1],
                dateList[i][2]
            ]);
        }


        option = {
            tooltip: {
                formatter: function (params) {
                    // return '值班: ' + params.value[1];
                }
            },

            visualMap: {
                show: false,
                min: 0,
                max: 300,
                calculable: true,
                seriesIndex: [2],
                orient: 'horizontal',
                left: 'center',
                bottom: 20,
                inRange: {
                    color: ['#88d0ff', '#acd6ff'],
                    opacity: 0.3
                },
                controller: {
                    inRange: {
                        opacity: 0.5
                    }
                }
            },

            calendar: [{
                left: 'center',
                top: 'middle',
                cellSize: [150, 80],
                yearLabel: {show: true},
                orient: 'vertical',
                dayLabel: {
                    margin: 10,
                    firstDay: 1,
                    nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                },
                monthLabel: {
                    // position:'left',
                    align:"center",
                    margin: 10,
                    nameMap: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                range: '${year}-${month}'
            }],

            series: [{
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            var d = echarts.number.parseDate(params.value[0]);
                            return d.getDate() + '\n\n' + params.value[2] + '\n\n';
                        },
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                data: lunarData
            }, {
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            return '\n\n\n' + (params.value[3] || '');
                        },
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 700,
                            color: '#ff493d'
                        }
                    }
                },
                data: lunarData
            }, {
                name: '值班',
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: heatmapData,
                hoverable:false,
                gradientColors:[{
                    offset:0.4,
                    color:'green'
                }]
            }]
        };
        myChart.setOption(option);


	</script>
	</body>
	<script>

	</script>
</html>